import React, { Component } from 'react'
import { Input, Select, Table, Button, Pagination } from 'antd'
import { Map, Base } from 'rc-bmap'

import XHeader from '../../components/header'
import XFooter from '../../components/footer'
import './index.scss'

const { Point } = Base
const Option = Select.Option

export default class Garden extends Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [
        {
          key: '1',
          name: '东方慧谷',
          area: '嘉定区',
          tel: '60712823',
          address: '嘉定区宝安公路2999弄',
        }, {
          key: '2',
          name: '中国梦谷——上海西虹桥文化创意产业园',
          area: '青浦区',
          tel: '69765050',
          address: '上海市青浦区华徐公路888号',
        }, {
          key: '3',
          name: '中国北斗产业技术创新西虹桥基地',
          area: '青浦区',
          tel: '80162529',
          address: '上海市青浦区徐泾镇高泾路599号和高光路215弄99号',
        }, {
          key: '4',
          name: '上海尚之坊文化创意园',
          area: '青浦区',
          tel: '39780266',
          address: '上海市青浦区崧泽大道6066号',
        }, {
          key: '5',
          name: '微格文化创意园',
          area: '青浦区',
          tel: '15901666132',
          address: '上海市青浦区徐泾镇徐德路59号',
        }, {
          key: '6',
          name: '移动智地文化创意产业园',
          area: '青浦区',
          tel: '60258238',
          address: '上海市青浦区沪青平公路3938弄',
        }, {
          key: '7',
          name: '半岛1919文化创意产业园',
          area: '宝山区',
          tel: '56840702*805',
          address: '淞兴西路258号',
        }, {
          key: '8',
          name: '上海木文化博览园',
          area: '宝山区',
          tel: '56652660',
          address: '宝山区沪太路2695号',
        }, {
          key: '9',
          name: '长江软件园',
          area: '宝山区',
          tel: '36626666',
          address: '长江南路180号',
        }, {
          key: '10',
          name: '上海国际工业设计中心',
          area: '宝山区',
          tel: '56465995',
          address: '宝山区逸仙路3000号',
        }, {
          key: '11',
          name: '上海宝山科技园（动漫衍生产业园）',
          area: '宝山区',
          tel: '66136100',
          address: '上海市宝山区上大路668号5楼',
        }
      ],
      columns: [
        {
          title: '园区名称',
          dataIndex: 'name',
          key: 'name',
        }, {
          title: '所属区县',
          dataIndex: 'area',
          key: 'area',
        }, {
          title: '电话',
          dataIndex: 'tel',
          key: 'tel',
        }, {
          title: '地址',
          dataIndex: 'address',
          key: 'address',
        }, {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <span>
              <Button type="primary" size="small" className='btn btn1'>申请入驻</Button>
            </span>
          ),
        }
      ]
    }
  }
  componentDidMount() {
    
  }
  render() {
    return (
      <section className='page page-garden'>
        <XHeader activeIndex={3}></XHeader>
        <div className='map'>
          <Map
            ak="0dxkSGvqiGyQDQe2OaKwayiVrl31xkn8"
            scrollWheelZoom={true}
            zoom={12}
          >
            <Point name="center" lng="121.48" lat="31.22" />
          </Map>
        </div>
        <div className='inner'>
          <div className='filter-wrap'>
            <div className='line'>
              <div className='item item1'>
                <span>园区名称：</span>
                <Input className='input input1' />
              </div>
              <div className='item item2'>
                <span>所属辖区：</span>
                <Select defaultValue="all" className='select'>
                  <Option value="all">全部</Option>
                  <Option value="lucy">黄浦区</Option>
                  <Option value="lucy">徐汇区</Option>
                  <Option value="lucy">长宁区</Option>
                  <Option value="lucy">静安区</Option>
                  <Option value="lucy">虹口区</Option>
                  <Option value="lucy">杨浦区</Option>
                  <Option value="lucy">闵行区</Option>
                  <Option value="lucy">宝山区</Option>
                  <Option value="lucy">嘉定区</Option>
                  <Option value="lucy">浦东新区</Option>
                  <Option value="lucy">金山区</Option>
                  <Option value="lucy">松江区</Option>
                  <Option value="lucy">青浦区</Option>
                  <Option value="lucy">奉贤区</Option>
                  <Option value="lucy">崇明区</Option>
                </Select>
              </div>
            </div>
            <div className='line'>
              <div className='item item3'>
                <span>地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</span>
                <Input className='input input2' />
              </div>
              <Button type="primary" className='btn btn1'>查询</Button>
              <Button className='btn btn2'>重置</Button>
            </div>
          </div>
          <Table
            columns={this.state.columns}
            dataSource={this.state.data}
            pagination={false}
          />
          <div className='pagination'>
            <Pagination showQuickJumper defaultCurrent={2} total={500} />
          </div>
        </div>
        <XFooter></XFooter>
      </section>
    )
  }
}